<template>
    <div class="risk-item-control-set">
        <div class="risk-control-button">
            <div style="padding: 5px 0 5px 10px">
                <el-card>
                    <el-input
                        clearable
                        placeholder="条目编号"
                        style="width: 150px; margin-right: 10px"
                        size="mini"
                        v-model="queryParam.entryCodes"
                    ></el-input>
                    <el-select
                        placeholder="条目类别"
                        clearable
                        class="risk-el-select"
                        style="width: 150px; margin-right: 10px"
                        size="mini"
                        v-model="queryParam.entryType"
                    >
                        <el-option
                            v-for="item in hsControlDefines"
                            :key="item.sourceCode"
                            :value="item.sourceCode"
                            :label="item.sourceCode + ' ' + item.sourceName"
                        ></el-option>
                    </el-select>
                    <el-select
                        clearable
                        placeholder="最近变动条目"
                        class="risk-el-select"
                        style="width: 150px; margin-right: 10px"
                        size="mini"
                        v-model="queryParam.isUpdate"
                    >
                        <el-option value="1" label="是"></el-option>
                        <el-option value="0" label="否"></el-option>
                    </el-select>
                    <el-button type="primary" @click="search(1)" size="mini" class="el-icon-search"> 查 询 </el-button>
                    <el-button type="primary" @click="refresh(1)" size="mini" class="el-icon-refresh"> 重 置 </el-button>
                    <el-button type="primary" @click="exportResult" size="mini" class="el-icon-download"> 导 出 </el-button>
                </el-card>
            </div>
        </div>
        <div style="border: 1px solid rgb(202, 202, 202)">
            <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" border size="mini" v-loading="queryLoading">
                <el-table-column prop="entryCode" label="条目编码" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="entryName" label="条目名称" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="hsEntryType" label="条目类别" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span> {{ scope.row.hsEntryType }} ({{ scope.row.hsEntryTypeName }}) </span>
                    </template>
                </el-table-column>
                <el-table-column prop="modifyDate" label="同步时间" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span> {{ dateFormat(scope.row.modifyDate) }} {{ timeFormat(scope.row.modifyTime) }} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="110">
                    <template slot-scope="scope">
                        <RiskIconButton
                            type="primary"
                            icon="el-icon-printer"
                            topTitle="条目同步记录"
                            size="mini"
                            @on-click="lookInfo(scope.row, 'record')"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="primary"
                            icon="el-icon-view"
                            topTitle="最近变动记录"
                            size="mini"
                            :disabled="scope.row.isChange != true"
                            @on-click="lookInfo(scope.row, 'lastview')"
                        >
                        </RiskIconButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <risk-pagination :paging="queryParam.paging" @page-change="search"></risk-pagination>
            </div>
        </div>
        <el-drawer :title="drawerTitle" :visible.sync="drawerVisible">
            <div class="edit-div">
                <template v-for="(val, key) in changeDetail">
                    <EntryItemCompare
                        v-if="curRow.differenceMap && curRow.differenceMap[key]"
                        :key="key"
                        :title="val"
                        :data="curRow.differenceMap[key]"
                    />
                </template>
            </div>
        </el-drawer>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" fullscreen @close="closeCustom">
            <ItemCompareRecord :itemData="curRow" @freshData="search" ref="itemCompareRecord"></ItemCompareRecord>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import RiskPagination from '@/common/components/risk-pagination.vue';
import { timeFormat, dateFormat, getCurrentPageData } from '@/utils/tools';
import { Component, Vue } from 'vue-property-decorator';
import EntryItemCompare from '@/pages/setting/components/item-setting/item-compare.vue';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import ItemCompareRecord from './components/item-compare-record.vue';
import { downLoadFile } from '@/utils/request';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'ItemSyncCompare',
    components: {
        RiskPagination,
        EntryItemCompare,
        RiskIconButton,
        ItemCompareRecord
    },
})
export default class ItemSyncCompare extends Vue {
    drawerVisible: boolean = false;
    dialogVisible: boolean = false;
    drawerRecordVisible: boolean = false;
    tableData: any[] = [];
    syncLoading: boolean = false;
    queryLoading: boolean = false;
    hsControlDefines: any = [];
    drawerTitle: string = '';
    dialogTitle: string = '';
    timeFormat = timeFormat;
    dateFormat = dateFormat;
    editableTabsValue: string = '条目设置';
    editableTabs: any = [];
    pages: any = {
        total: 1,
        pageSize: 1,
        currentPage: 1,
    };
    queryParam: any = {
        paging: {
            total: 1,
            pageSize: 10,
            currentPage: 1,
        },
        entyrCodes: '',
        entryType: '',
        isUpdate: '',
    };
    syncParam: any = {
        serialNo: '',
        entryType: '',
        importType: '1',
        entryETL: false,
        sourceType: '2',
    };
    changeDatas: any = {};
    filterData: any = {};
    pageData: any = {};
    curRow: any = {};
    changeDetail: any = {
        EntryControl: '条目基本信息',
        EntryBranch: '条目分支信息',
        EntryBranchConfig: '条目分支范围配置信息',
        RiskEntryParam: '高级设置信息',
        EntryFundConfig: '基金范围信息',
        RiskCustomResidualMaturity: '条目自定义设置-剩余期限参数',
        RiskCustomApprovalTier: '条目自定义设置-审批层级参数设置',
        RegulationsPublicOffering: '条目自定义设置-法规公募',
        RegulationsOnlyDoorGather: '条目自定义设置-法规专户(集合)',
        RegulationsOnlyDoorSingle: '条目自定义设置-法规专户(单一)',
        JoinRiskEntryControls: '条目关联',
        MutualRiskEntryControls: '条目互斥',
        PremiseRiskEntryControls: '前提条目',
    };
    recordData: any = {};
    mounted() {
        this.$axios.get('/entry/sync/riskType').then((res: any) => {
            if (res) {
                this.hsControlDefines = res;
            }
        });
        this.search(1);
    }
    private handleParam(value: string, filed: string): void {}
    search(currentPage) {
        if (currentPage) {
            this.queryParam.paging.currentPage = currentPage;
        }
        this.queryLoading = true;
        this.$axios.post('/entry/sync/last/change', this.queryParam).then((res: any) => {
            this.queryLoading = false;
            if (res) {
                this.tableData = res.list;
                this.queryParam.paging.total = res.total;
            }
        });
    }
    lookInfo(row: any, type: any) {
        if (type == 'record') {
            this.dialogTitle = '【' + row.entryCode + '】变动信息';
            this.dialogVisible = true;
            this.curRow = row;
        } else if (type == 'lastview') {
            this.drawerTitle = '【' + row.entryCode + '】变动信息';
            this.drawerVisible = true;
            this.curRow = row;
        }
    }
    currentChange(val?: number): void {
        if (val) {
            this.pages.paging.currentPage = val;
        }
        this.pages.total = this.filterData.length;
        this.pageData = getCurrentPageData(this.filterData, this.pages.currentPage, this.pages.pageSize);
        this.queryLoading = false;
    }
    // 关闭自定义
    closeCustom(val: any) {
        this.drawerVisible = false;
        this.curRow = {};
    }
    refresh(currentPage) {
        this.queryParam.entryCodes = '';
        this.queryParam.entryType = '';
        this.queryParam.isUpdate = '';
        this.search(currentPage);
    }
    exportResult() {
        this.$confirm('是否下载变动明细?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
        }).then(() => {
            let queryParam = JSON.parse(JSON.stringify(this.queryParam));
            delete queryParam.paging;
            downLoadFile({
                url: '/entry/sync/last/change/export',
                method: 'post',
                data: queryParam,
            });
        });
    }
}
</script>
<style lang="scss" scoped>
.risk-item-control-set {
    // width: 1200px;
    min-width: 1100px;
}
/deep/ .el-drawer__body {
    overflow: auto;
}
/deep/ .el-table td,
/deep/ .el-table th {
    padding: 5px 0;
}

.move-box {
    @if ($env== 'production') {
        height: calc(100vh - 110px);
    } @else {
        height: 100%;
    }
}
</style>
